<template>
	<div class="bim-drawer" :class="!visible ? '' : 'bim-drawer-open'">
		<div class="bim-drawer-mask"></div>
		<div class="bim-drawer-left">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="power-monitor">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">电力监控</h3>
									</div>
									<div class="electric-wrap">
										<div class="equip-list">
											<button
													class="bim-btn-primary"
													:class="item.number === device_number_ws ? 'active' : ''"
													v-for="item in electListData"
													:key="item.number"
													@click="changeEqWs(item.number)">{{ item.name }}
											</button>
										</div>
										<div class="main-wrap" v-if="Object.keys(electricData).length !== 0">
											<div class="chart-container">
												<Chart id="powerChart" width="100%" height="240px" :items="electricData" :typeName="powerName" :number="device_number_ws" v-if="hackReset1" />
											</div>
											<div class="chart-container">
												<Chart id="voltageChart" width="100%" height="240px" :items="electricData" :typeName="voltageName" :number="device_number_ws" v-if="hackReset2" />
											</div>
											<div class="chart-container">
												<Chart id="currentChart" width="100%" height="240px" :items="electricData" :typeName="currentName" :number="device_number_ws" v-if="hackReset3" />
											</div>
										</div>
										<div style="display: flex;justify-content: center;align-items: center;width: 477px;height: 770px;color: #a7c7e1;font-size: 20px" v-else>暂无数据</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="bim-drawer-right">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="power-monitor">
									<div class="line-block-placeholder"></div>
									<div class="header-block">
										<h3 class="box-title">电力监控</h3>
									</div>
									<div class="electric-wrap">
										<div class="equip-list">
											<button
													class="bim-btn-primary"
													:class="item.number === device_number ? 'active' : ''"
													v-for="(item, index) in electListData"
													:key="item.number"
													@click="changeEq(item.number)">{{ index === 0 ? '全部' : item.name }}
											</button>
										</div>
										<div class="statis-wrap" v-if="statisNum">
											<span>共有 <b>{{ statisNum }}</b> 条报警信息</span>
										</div>
										<div id="mainArea" class="alarm-messages alarms-list" @scroll="dropLoad" v-loading="listLoading">
											<div style="flex: 1" v-if="alarms.length > 0">
												<div class="alarms-list-item" v-for="(item, index) in alarms" :key="index">
													{{ item.created_at }} {{ item.device_name }} {{ item.event_msg }}
												</div>
											</div>
											<div style="color: #a7c7e1;font-size: 20px;" v-else>暂无数据</div>
										</div>
									</div>
									<div class="line-block-placeholder"></div>
									<div id="myChart" :style="{width: '562px', height: '460px'}"></div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import Chart from '@/components/Charts/LineMarker'

export default {
	components: {
		Chart
	},
	data() {
		return {
			visible: false,
			interval: null,
			statisNum: 0,
			alarms: [],
			listLoading: true,
			page: 1,
			hackReset1: false,
			hackReset2: false,
			hackReset3: false,
			electricData: {},
			powerName: '功率',
			currentName: '电流',
			voltageName: '电压',
			device_number: 0,
			device_number_ws: 0,
			electListData: []
		}
	},
	created() {
		const _self = this
		_self.getElectListData()
		_self.getStatisNum()
		_self.getPowerData()
		_self.socketInit()
		_self.interval = setInterval(() => {
			if (!_self.visible) {
				_self.visible = true
			}
			clearInterval(_self.interval)
		}, 500)
	},
	beforeDestroy() {
		// this.over()
		if (this.interval) {
			clearInterval(this.interval)
		}
	},
	methods: {
		getElectListData () {
			this.$http.get('/api/get_devices', { params: { device_type: 'electric' } }).then(res => {
				this.electListData = res.data.data
				this.device_number_ws = res.data.data[0].number
				this.device_number = res.data.data[0].number
			})
		},
		getStatisNum (number) {
			this.$http.get('/api/report/count', {params: {event_type: 'electric', device_number: number}}).then(res => {
				this.statisNum = res.data.data.count
			})
		},
		getPowerData () {
			this.listLoading = true
			this.$http.get('/api/report', {params: {rows: 50, event_type: 'electric'}}).then(response => {
				this.alarms = response.data.data
				this.listLoading = false
			})
		},
		dropLoad () {
			const _self = this
			const el = document.getElementById('mainArea')
			const marginBot = el.scrollHeight - (el.scrollTop + document.body.scrollTop) - el.clientHeight
			if (marginBot <= 1) {
				_self.page += 1
				const page = _self.page
				const args = {
					event_type: 'electric',
					device_number: this.device_number,
					page: page
				}
				_self.listLoading = true
				this.$http.get('/api/report', {params: args}).then(response => {
					_self.alarms = _self.alarms.concat(response.data.data)
					_self.listLoading = false
				}, err => {
					this.$message({
						type: 'info',
						message: '操作失败!' + err
					})
				})
			}
		},
		socketInit () {
			let ws = new WebSocket(this.$wsUrl)
			ws.onmessage = evt => {
				// console.log('数据已接收...')
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')
				var _self = this
				if (res.module === 'electric' && res.type === 'info') {
					_self.electricData = res.data[10]
					_self.hackReset1 = false
					_self.hackReset2 = false
					_self.hackReset3 = false
					_self.$nextTick(() => {
						_self.hackReset1 = true
						_self.hackReset2 = true
						_self.hackReset3 = true
					})
				}
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		},
		drawLine () {
			// 基于准备好的dom，初始化echarts实例
			const myChart = this.$echarts.init(document.getElementById('myChart'))
			const colors = ['#5793f3', '#d14a61', '#675bba', '#769abf']
			// 绘制图表
			myChart.setOption({
				color: colors,
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'cross'
					}
				},
				grid: {
					right: '20%'
				},
				legend: {
					data: ['电压', '电流']
				},
				label: {
					normal: {
						textStyle: {
							fontSize: '28px'
						}
					}
				},
				xAxis: [
					{
						type: 'category',
						axisTick: {
							alignWithLabel: true
						},
						axisLine: {
							lineStyle: {
								color: colors[0]
							}
						},
						name: '时间',
						data: ['2', '4', '6', '8', '10', '12', '14', '16', '18', '20', '22', '24']
					}
				],
				yAxis: [
					{
						type: 'value',
						min: 0,
						max: 450,
						position: 'left',
						name: '电压V/电流A',
						axisLine: {
							lineStyle: {
								color: colors[0]
							}
						},
						axisLabel: {
							formatter: '{value}'
						}
					}
				],
				series: [
					{
						name: '电压',
						type: 'line',
						data: [40, 62, 120, 50, 150, 120, 240, 290, 232, 189, 135, 345]
					},

					{
						name: '电流',
						type: 'line',
						data: [20, 22, 33, 45, 123, 102, 203, 234, 230, 165, 120, 62]
					}
				]
			})
		},
		changeEq (number) {
			this.device_number = number
			this.listLoading = true
			this.$http.get('/api/report', {
				params: {
					rows: 50,
					event_type: 'electric',
					device_number: number
				}
			}).then(response => {
				this.alarms = response.data.data
				this.listLoading = false
				this.getStatisNum(number)
			})
		},
		changeEqWs (number) {
			this.device_number_ws = number
		}
	},
	mounted() {
		// this.drawLine()
	}
}
</script>

<style lang="scss">
.bim-btn-primary {
	background-color: transparent;
	user-select: none;
	cursor: pointer;
	touch-action: manipulation;
	font-size: 16px;
	//width: 105px;
	margin: 15px 12px 0 0;
	color: #cde9ff;
	border: 1px solid #cde9ff;
	border-radius: 2px;
	outline: none;
	padding: 0 12px;
	&.active {
		background-color: rgba($color: #294c71, $alpha: 0.8);
		border-color: rgba($color: #294c71, $alpha: 0.8);
	}
}

.statis-wrap {
	color: #a7c7e1;
	font-size: 20px;
	padding: 25px 0 20px;

	b {
		color: #e24b33;
	}
}

.chart-container {
	background-color: rgba($color: #214d6c, $alpha: 0.5);
	margin-top: 25px;

	& + & {
	}
}

.alarms-list {
	margin: 0 0 25px;
	height: 710px;
	display: flex;
	justify-content: center;
	align-items: center;

	&-item {
		font-size: 18px;
		color: #e24b33;
		line-height: 36px;
	}
}

.power-list {
	padding: 40px 0 48px;
}

.pi-title {
	color: #75c0ca;
	font-size: 18px;
	padding: 6px 0 12px;
}

.pi-processbar {
	width: 562px;
	height: 22px;
	background-image: linear-gradient(to right, #bfebfe 0%, #9bd4e6 20%, #6fc2da 40%, #4d9dbf 60%, #e05f4a 80%);
	/*background-image: linear-gradient(to right, #bfebfe 0%, #bfebfe 20%, #9bd4e6 20%, #9bd4e6 40%, #6fc2da 40%, #6fc2da 60%, #4d9dbf 60%, #4d9dbf 80%, #e05f4a 80%);*/
}
</style>
